<template>
  <div>

    <div id="background"></div>
    <body id="poster">
      <el-form class="login-container" lable-position="left" label-width="0px">
        <h3 class="login_title">
          <span style="margin-right:20px">登录</span>
<!--          <button @click="test">测试</button>-->
        </h3>
        <el-form-item label="">
          <el-input type="text" v-model="loginForm.username" autocomplete="off" placeholder="账号"
            style="width: 300px;margin-left: 23px">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"
            style="width: 300px;;margin-left: 23px"></el-input>
        </el-form-item>

        <el-form-item style="width:100%;;margin-left: 23px">
          <el-button type="primary" style="width: 300px;background:#505458;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;" v-on:click="Login">登录</el-button>
 <el-button type="primary" style="margin-left: 0px;width: 300px;background:#505458;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;" v-on:click="back">退出</el-button>
        </el-form-item>
      </el-form>

    </body>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    created() {
        this.$message({
          message: '欢迎',
          center: true
        });
    },
    data() {
      return {

        loginForm: {
          username: '',
          password: ''

        }
      }
    },
    methods: {
      Login() {
         // console.log('submit!',this.loginForm );
        this.$axios.post('http://localhost:9090/login', this.loginForm).then((res) => {
          console.log(res)
          if (res.data.code==200) {
            this.$axios.post('http://localhost:9090/findad',this.loginForm).then(res=>res.data).then(res=>{this.$globle.setAd(res)}),
            this.$axios.post('http://localhost:9090/findname',this.loginForm).then(res=>res.data).then(res=>{this.$globle.setMyname(res)})

            this.$globle.setMyid(this.loginForm.username)
            this.loginForm = {}
            this.$message({
              message: '恭喜你，登录成功',
              type: 'success',
            });
            this.$router.push({path: "/map"})
          }
          else{
            this.loginForm = {}
            this.$message.error('账号或密码错误');
          }


        })
        },
      back(){
        this.$router.push({path:'/head'})
      }




    }
  }

</script>

<style>
  #poster {
    background-position: center;
    height: 100%;
    width: 100%;
    /*border-style: cover;*/
    position: fixed;
    opacity:1;
  }

  body {
    margin: 0px;
    padding: 0px;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 8px auto 30px auto;
    text-align: center;
    color: #505458;
  }

  #background {
    /*background: url("../assets/234.jpg") no-repeat center;*/
    height: 100%;
    width: 100%;
    background-size: cover;
    top: 0px;
    position: fixed;
  }
</style>